<script setup>
import { reactive, ref, toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Type from '@components/search/type';
import Search from '@components/search/index';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';
import { usePremission } from '@hooks';
import record from './record';

const premission = usePremission({
    list: 'businessOperations:leaseRate:leasePageQuery',
    enable: 'goods:leasePeriodSwitch:enable',
    close: 'goods:leasePeriodSwitch:close',
});

const searchs = ref([
    {
        type: Type.DATE_RANGE,
        width: 7,
        key: 'time',
        endPlaceholder: '操作结束时间',
        startPlaceholder: '操作开始时间',
    },
    {
        type: Type.SELECT,
        key: 'status',
        width: 3,
        placeholder: '租期类型',
        valueKey: 'val',
        data: [
            {
                label: '未启用',
                val: 0,
            },
            {
                label: '已启用',
                val: 1,
            },
            {
                label: '已关闭',
                val: 2,
            },
        ],
    },
    {
        width: 5,
        type: Type.SEARCH_BUTTON,
    },
]);

const pageRef = ref();
const tableRef = ref();
const types = ref();
const recordRef = ref();

let queryForm = reactive({});
const onSearch = param => {
    queryForm = param;
    pageRef.value.refresh();
};

const getData = async ({ pageNum, pageSize }, cb) => {
    const query = { ...queryForm };
    if (query.time && query.time.length > 0) {
        query.startDate = query.time[0];
        query.endDate = query.time[1];
    }
    delete query.time;
    const res = await service.bfqz.LeasePeriodSwitchList(query);
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};
const showRecord = async row => {
    recordRef.value.open(row);
};
const openBtnFn = async (id, day) => {
    ElMessageBox.confirm(`您确定要启用租期${day}天的租赁方案吗？`)
        .then(async () => {
            const res = await service.bfqz.LeasePeriodSwitchEnable({ id: id });
            if (res.resultCode == 8200) {
                pageRef.value.refresh(true);
                ElMessage.success('启用成功');
            }
        })
        .catch(() => {
            // catch error
        });
};
const closeBtnFn = async (id, day) => {
    ElMessageBox.confirm(`您确定要关闭租期${day}天的租赁方案吗？`)
        .then(async () => {
            const res = await service.bfqz.LeasePeriodSwitchClose({ id: id });
            if (res.resultCode == 8200) {
                pageRef.value.refresh(true);
                ElMessage.success('关闭成功');
            }
        })
        .catch(() => {
            // catch error
        });
};
const changeState = async row => {
    const param = toRaw(row);
    param.state = !param.state;
    const res = await service.bfqz.userState(param);
    res && pageRef.value.refresh(true);
};

const deleteRow = async row => {
    ElMessageBox.confirm('是否删除此记录', '提示', {
        type: 'warning',
    }).then(async () => {
        const res = await service.bfqz.userRemove(row.id);
        if (res) {
            ElMessage.success('删除成功');
            pageRef.value.refresh(true);
        }
    });
};

const width = (function (premission) {
    let width = 24;
    premission.view && (width += 33);
    premission.edit && (width += 33);
    return Math.max(width, 72);
})(premission);
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <page-wrapper @get-data="getData" ref="pageRef" :noPage="true">
            <template v-slot:default="props">
                <vxe-table ref="tableRef" align="center" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, 1)" highlight-hover-row round stripe border>
                    <!-- <vxe-column type="seq" width="60"></vxe-column> -->
                    <vxe-column title="租期" width="160">
                        <template #default="{ row }">{{ row.day + '天' }}</template>
                    </vxe-column>
                    <vxe-column title="状态">
                        <template #default="{ row }">
                            {{ row.status == 0 ? '未启用' : row.status == 1 ? '已启用' : '已关闭' }}
                        </template>
                    </vxe-column>
                    <!-- <vxe-column field="createDate" title="上架中商品数量" width="160" /> -->
                    <vxe-column title="最新操作时间">
                        <template #default="{ row }">
                            <span class="link" @click="premission.list ? showRecord(row) : ''">
                                {{ row.updateTime }}
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-column title="操作" :width="150">
                        <template #default="{ row }">
                            <span class="cursorBtn" v-if="row.status == 1 && premission.close" style="color: red" @click="closeBtnFn(row.id, row.day)">关闭</span>
                            <span class="cursorBtn" v-else style="color: green" @click="openBtnFn(row.id, row.day)">
                                <span v-if="premission.enable">启用</span>
                            </span>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <record ref="recordRef" />
    </section>
</template>
<style lang="scss" scoped>
.link {
    color: #e47633;
    cursor: pointer;
}
.cursorBtn {
    cursor: pointer;
}
</style>
